<template>
	<van-nav-bar right-text="帮助" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
	<div class="pass_box">
		<div class="yi">
			<h2>输入验证码</h2>
			<p>验证码已发送至
				<!-- <sapn>+86<span>{{ loginData.username }}</span></sapn> -->
				<span>{{ loginData.username }}</span>
			</p>
		</div>
		<!-- 密码输入框 -->
		<van-password-input :value="value" :gutter="10" :mask="false" info="" :error-info="errorInfo"
			:focused="showKeyboard" @focus="showKeyboard = true" />
		<!-- 数字键盘 -->
		<!-- <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" /> -->
		<!-- <van-number-keyboard :show="show" theme="custom" extra-key="." close-button-text="完成" @blur="show = false"
			@input="onInput" @delete="onDelete" /> -->

		<van-field v-model="loginData.inputCheckCode" name="用户名" label="验证码" placeholder="请输入验证码"
			:rules="[{ required: true, message: '请填写验证码' }]" />
		<div class="yi">
			<p v-if="countdown>0"><span>{{ countdown }}</span>秒后重新获取验证码</p>
			<p v-show="judge">重新获取验证码</p>
		</div>
		<van-button @click="login()" round block color="#ffd101" native-type="submit" style="margin-top: 20px">

			<span style="color: black;font-weight: bold;">登录</span>

		</van-button>
	</div>
</template>
<script>
	// import {
	// 	ref,
	// 	watch,
	// 	Toast
	// } from 'vue';
	import qs from 'qs'
	export default {
		data() {
			return {
				loginData: {
					username: '',
					inputCheckCode: '',
					checkCode: '',
				},
				value: '',
				phone: '',
				countdown: 5,
				judge: false,
			}
		},
		// setup() {
		// 	const value = ref('');
		// 	const errorInfo = ref('');
		// 	const showKeyboard = ref(true);
		// 	const onClickLeft = () => history.back();
		// 	const onClickRight = () => Toast('按钮');
		// 	watch(value, (newVal) => {
		// 		if (newVal.length === 6 && newVal !== '123456') {
		// 			errorInfo.value = '验证码错误';
		// 		} else {
		// 			errorInfo.value = '';
		// 		}
		// 	});
		// 	return {
		// 		value,
		// 		errorInfo,
		// 		showKeyboard,
		// 		onClickLeft,
		// 		onClickRight,
		// 	};
		// },

		mounted() {
			this.getUsername();

			this.demo();
		},
		methods: {
			getUsername() {
				this.loginData.username = this.$route.query.username;
				console.log("this.$route.query.username=" + this.$route.query.username);
				console.log("this.loginData.username=" + this.loginData.username);
			},
			demo() {
				this.phone = this.$route.params.username;
				setInterval(() => {
					this.countdown--;
					if (this.countdown === 0) {
						this.judge = true
					}
				}, 1000)
			},
			login() {
				this.$axios.post('/user/login/with/verification/code', qs.stringify(this.loginData))
					.then(res => {
						if (res.result.message==true) {
							this.$message({
								message: '登录成功',
								type: 'success'
							})
							this.$router.push('/homepage');
						} else {
							console.log("dsjalfkdls");
							this.$message({
								message: res.result.message,
								type: 'warning'
							})
							return;
						}
					})
			}
		}
	};
</script>
<style>
	.pass_box {
		border: 1px solid red;
		margin: 30px 20px 0px 20px;
	}

	.yi {
		margin-left: 16px;
	}
</style>
